<template>
    <view class="invite tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">分享有礼</tn-navbar>

        <view class="invite-header tn-bg-main">
            <view class="invite-header-top">
                <view class="header-text">可提现</view>
                <view class="header-balance">￥{{ userBalance }}</view>
            </view>
            <view class="invite-header-bottom tn-flex">
                <view class="total-view invite-total tn-flex-3 tn-flex-column">
                    <view class="total-text">累计收益</view>
                    <view class="money">￥{{ incomeTotal }}</view>
                </view>
                <view class="total-view balance-total tn-flex-3 tn-flex-column">
                    <view class="total-text">累计已提现</view>
                    <view class="money">￥{{ withdrawalTotal }}</view>
                </view>
            </view>
        </view>

        <view class="invite-middle">
            <view class="invite-btn tn-bg-main" @click="toUrl('/pages/mine/withdrawal/withdrawal')">立即提现</view>
        </view>
        <view class="invite-menus">
            <view class="menu-item tn-flex-column" v-for="(menu, index) in menuList" @click="toUrl(menu.url)">
                <view class="icon">
                    <TnIcon class="tn-color-main" :icon="menu.icon"></TnIcon>
                </view>
                <view class="tn-color-main">{{ menu.name }}</view>
            </view>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { navLogin, navPage } from "@/tuniao-ui/utils";
import { getBalanceInfo } from "@/api/user";
import { ResultEnum } from "@/enums/httpEnum";
const userStore = useUserStore();
const isLogin = ref<boolean>(false);
const userBalance = ref(0);
const incomeTotal = ref(0);
const withdrawalTotal = ref(0);

const menuList = [
    {
        icon: "qr-code",
        name: "推广名片",
        url: "/pages/mine/share/qrcode",
    },
    {
        icon: "order",
        name: "受邀人列表",
        url: "/pages/mine/share/inviteeList",
    },
    {
        icon: "money",
        name: "佣金明细",
        url: "/pages/mine/share/balanceDetail",
    },
    {
        icon: "time",
        name: "提现记录",
        url: "/pages/mine/withdrawal/withdrawalRecord",
    }
];

function toUrl(url: string) {
    navPage(url);
}

onMounted(() => {
    isLogin.value = userStore.isLogin();
    if (isLogin.value) {
        // 获取余额
        getBalanceInfo().then((res) => {
            if (res.code === ResultEnum.SUCCESS) {
                userBalance.value = res.result.balance;
                incomeTotal.value = res.result.incomeTotal;
                withdrawalTotal.value = res.result.withdrawalTotal;
            }
        })
    } else {
        navLogin();
    }

});
</script>
  
<style lang="scss" scoped>
.invite {

    &-header {
        height: 390rpx;
        background-image: url("@/static/images/mine/money-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 10px;

        &-top {
            padding-top: 20rpx;
            text-align: center;

            .header-text {
                font-size: 40rpx;
            }

            .header-balance {
                font-size: 70rpx;
                margin-top: 30rpx;
            }
        }

        &-bottom {
            margin-top: 70rpx;
            font-size: 30rpx;
            padding: 0 50rpx;

            .total-view {
                align-items: flex-start;
            }

            .balance-total {
                align-items: flex-end;
            }

        }

    }

    &-middle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;

        .invite-btn {
            padding: 13rpx 50rpx;
            border-radius: 50rpx;
            border: 18rpx solid #f5f5f5;
            position: relative;
            top: -30rpx
        }
    }

    &-menus {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        .menu-item {
            background: #fff;
            display: flex;
            flex-wrap: wrap;
            width: 320rpx;
            height: 220rpx;
            margin: 20rpx;
            align-items: center;
            justify-content: center;

            .icon {
                font-size: 50rpx;
            }
        }
    }
}
</style>
  